<template>
    <div id="Activity">
        <vj-list :load-more="loadMore.bind(this)">
            <template #default="{item}">
                <section @click="$pushRoute({path:'/activity-info',query:{customId:item.id}})" class="c-activity">
                    <van-image fit="cover" class="c-activity__img" :src="item.actbill"/>
                    <div class="c-activity__wrap">
                        <h3 class="c-activity__title">{{item.title}}</h3>
                        <p>活动时间：{{item.actstarttime}}</p>
                        <em>主办方：{{item.sponsor}}</em>
                    </div>
                </section>
            </template>
        </vj-list>
    </div>
</template>
<script lang="ts">
    import Vue, {ComponentOptions, VueConstructor} from "vue"
    import Component from 'vue-class-component'
    import {requestByGet} from "@/utils/request";
    import {mapState} from "vuex";
    import VjList from "@/components/vj-list.vue";
    @Component({
        components: {VjList}
    })
    export default class Activity extends Vue implements ComponentOptions<Vue> {
        name = "Activity";
        async loadMore(pageNo, pageSize) {
            const {records} = await requestByGet(`/qqc/qqcActsign/userList`, {
                pageNo,
                pageSize,
                QqcActsign: sessionStorage.getItem("userId")
            });
            return records;
        }
    }
</script>

<style scoped lang="scss">
    @import "~assets/common.scss";
    #Activity {
        .c-activity {
            @include alignCenter;
            padding: 8px 0 6px;
            &__img {
                width: 100px;
                height: 67px;
                flex-shrink: 0;
                margin-right: 16px;
            }
            &__wrap {
                line-height: 1.6;
                font-size: 12px;
                color: $p-color;
            }
            &__title {
                line-height: 1.3;
                font-size: 14px;
                color: $strong-clr;
                @include t-overflow(2);
            }
        }
    }
</style>
